<template>
    <view>
        <uni-search-bar 
        @confirm="search"
        placeholder="文件夹/设计稿编号搜索" 
        v-model="keyword" 
        @input="search"
        @cancel="search" 
        @clear="search"
        bgColor="#fff"
        >
        </uni-search-bar>
        <uni-card v-if="listchain.length>=1">
            <view class="histy" @click="prev()">
                <view class="prev">
                    <uni-icons type="back" size="14"></uni-icons>
                    
                </view>
                <view class="listchain">
                    <text v-for="(val,index) in listchain" :ley="index">/{{val.title}}</text>

                    
                </view>
               
        
            </view>      
        </uni-card>
          
        
        <view >
         
            <checkbox-group @change="radioChange">
                <uni-grid :column="4" :highlight="true" v-for="(item,index) in lists" :key="index" style="margin: 10rpx 0;">
                    <uni-grid-item v-for="(val, ind) in item" :index="ind" :key="ind">
                        <view v-if="val.cat == 1" class="grid-item-box"
                         @click="sspid(val.id,val.title)"
                        style="background-color: #fff;">
                            <image class="dirimg" src="@/static/icon/dir.png" mode="widthFix"></image>
                            <text class="text">{{val.title}}</text>

                        </view>
                        <view v-else class="grid-item-box" style="background-color: #fff;">
                            <view class="radio">
                                <checkbox :value="''+val.id" style="transform:scale(0.7)" />
                            </view>
                            <image class="dirimg" src="@/static/icon/DWG.png" mode="widthFix"></image>
    
                            <text class="text">{{val.title}}</text>
                        </view>
                    </uni-grid-item>
                </uni-grid>
            </checkbox-group>
        </view>
    </view>
</template>

<script>
    export default{
        data(){
            return{
               keyword:'',
               pid:0,
               lists:[],
               page:1,
               last_page:1,
               selthis:[],
               listchain:[],
               oid:''
            }
        },
        onNavigationBarButtonTap : function (e) {
            if(this.selthis.length<=0){
                this.$error("请选择设计稿")
                return
            }
            this.$api.post(`design/selfiles`,{
                ids:this.selthis,
                oid:this.oid
            }).then(()=>{
                uni.navigateBack({data:1})
            })
            uni.$emit('thethumb',this.oid)
        },
        onPullDownRefresh(){
            var _this = this
            setTimeout(function () {
                uni.stopPullDownRefresh();
                _this.lists = []
                _this.page = 1
                _this.getlists()
            }, 500);
        },
        onReachBottom(){
            if(this.page<this.last_page){
                this.page +=1
                this.getlists()
            }
        },
        onLoad(option){
            this.oid = option.oid
        },
        onShow(){
            this.page = 1
            this.lists = []
            this.listchain = []
            this.getlists()
      
        },
        methods: {
           prev(){
               var pop = this.listchain.pop()
               if(this.listchain.length<=0){
                   this.pid = 0
               }
               this.lists = [];
               this.keyword = ''
               this.page = 1
               this.getlists()
           },
           sspid(pid,title){
               this.pid = pid
               this.page = 1
               this.listchain.push({
                   id:pid,
                   title:title
               })
               this.getlists()
           }, 
           getlists(){
               this.$api.get(`files/design?pid=${this.pid}&page=${this.page}&keyword=${this.keyword}`).then(({data})=>{
                   this.lists = data.data
                   this.last_page = data.last_page
               })
           }, 
           search(){
              this.page = 1
              this.lists = []
              this.getlists() 
           },
           radioChange(e){
         
               this.selthis = e.detail.value
           } 
        },
    }
</script>

<style lang="scss">
    .dirimg{
        width: 60rpx;
        height: 60rpx;
    }
	.image {
		width: 50rpx;
		height: 50rpx;
	}

	.text {
		font-size: 14rpx;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
        position: relative;
        .radio{
            position: absolute;
            width: 44rpx;
            height: 44rpx;
            top: 5rpx;
            right: 5rpx;
            z-index: 9;
        }
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
    .histy{
        display: flex;
        align-items: center;
        .prev{
            margin-right: 20rpx;
            display: flex;
            align-items: center;
        }
    }
</style>

